<docs>
  ## 首页
</docs>
<template>
  <div class="index">
    <mheader type="index" title="存档信息查询" @back_btn="goBack()"></mheader>
    <!-- 申请须知 开始 -->
    <div class="list">
      <div class="title">
        <h3 class="title-h3">承诺书</h3>
      </div>
      <div class="content">
        <ul>
          <li class="c-li">本人承诺所查询的信息不用于法律、行政法规规定之外的其他目的。</li>
          <li class="c-li"><mt-switch :value.sync="value" @change="turn">已阅读并同意</mt-switch></li>
        </ul>
      </div>
    </div>
    <!-- 基本信息 -->
    <div class="apply">
      <div class="info">
        <div class="info-cont1">
          <p class="info-cont1-name">{{grxx.xm}}</p>
          <p class="info-cont1-phone">电话：{{grxx.lxdh}}</p>
        </div>
        <p class="info-cont2">身份证号：{{grxx.sfzhm}}</p>
      </div>
      <!-- <div class="apply-btn" @click="reverseBtn">查询</div> -->
      <button
        type="button"
        class="left btn btn-primary apply-btn"
        @click="reverseBtn"
        :disabled="!value"
      >查询</button>
    </div>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import { mapActions } from "vuex";
import $ from "@/common/js/axios";

export default {
  components: { Mheader },
  name: "readKnow",
  data() {
    return {
      value: false,
      visible: false,
      grxx: {
        sfzhm: "",
        xm: "",
        lxdh: ""
      }
    };
  },
  methods: {
    ...mapActions(["getUsers"]),
    goBack() {
      this.$router.go(-1);
    },
    turn(){
      this.value = !this.value;
    },
    // 申请记录页面跳转
    sqList() {
      if (this.noticeText != "暂无申请记录") {
        this.$router.push({ name: "search" });
      }
    },
    // 查询按钮
    reverseBtn() {
      this.$router.push({ name: "searchOne" });
    }
  },
  created() {
    this.getUsers();
  },
  watch: {
    "$store.state.person": function() {
      this.grxx = this.$store.state.person;
    }
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/variable.scss";

//竖屏  CSS
@media screen and (orientation: portrait) {
  .index {
    position: relative;
    width: 100vw;
  }
}
@media screen and (orientation: landscape) {
  //横CSS
}
// 申请须知
.list {
  border: $border;
  background-color: #fff;
  .title {
    display: flex;
    padding: 28px 48px;
    border-bottom: $border;
  }
  .title-h3 {
    font-size: $font-size-large;
    color: $color-text-title;
    flex: 1 1 auto;
    line-height: 80px;
  }
  .content {
    padding: 36px 48px;
    .c-li {
      line-height: 1.6;
      padding: 15px 0;
      font-size: 0.44444rem;
      span {
        width: 92%;
        display: inline-table;
      }
    }
  }
}
</style>
